<template>
	<header-footer :commonData="{$parent:$parent}">
		<div class="questionPage" v-cloak>
			<div class="crumb">
				<ul>
					<li class="f_left">当前位置：</li>
					<li class="f_left">
						<router-link to="/home">首页></router-link>
					</li>
					<li class="f_left">在线学习></li>
					<li class="f_left">答题界面</li>
				</ul>
			</div>
			<div class="index_width question_content">
				<div class="question_box f_left" ref="questionBoxHeight">
					<div class="question_list">
						<img :src="'/static/img/question/type'+questionList.type+'.png'" class="question_img_type" width="50px" height="22px">
						<dl class="question_list_dl">
							<dt>

								{{questionList.sort}}、{{questionList.question}}
							</dt>
							<dd v-for="(option,index) in questionList.option" :key="index" @click="optionClick(option.k)">
								<img :src="'/static/img/question/'+option.image+'.png'">
								{{option.v}}
							</dd>
						</dl>
					</div>
					<div class="question_btns text_center">
						<button class="question_prev" @click="prev">{{prevText}}</button>
						<button class="question_next" @click="next">{{nextText}}</button>
					</div>
				</div>
				<div class="question_sort_box f_left">
					<div class="question_tijiao">
						<div style="margin-top: 38px;">
							<img src="/static/img/question/time.png">
							<span class="countDown">{{continualTime}}</span>
						</div>
						<div style="margin-top: 25px;">
							<img @click="questionSubmit" src="/static/img/question/submit.png" style="cursor: pointer;">
						</div>
					</div>
					<div class="question_sort_list_box" :style="{height:questHeight}">
						<p class="datika text_center">答题卡</p>
						<div class="sortLiBox">
							<ul>
								<li :class="{isError:list.isError}" :key="index" v-for="(list,index) in itemPools" @click="toQuestion(index)">
									{{list.sort}}
								</li>
							</ul>
						</div>
						<div class="clear"></div>
						<div class="question_tixing">
							<span class="tixingGray"></span><span class="tixingGrayText">未做习题</span>
							<span class="tixingBlue"></span><span class="tixingBlueText">已做习题</span>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!-- 显示未做题数 -->
		<el-dialog title="提示" :visible.sync="lastQuestionDialog" width="30%">
			<span>{{lastQuestion}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="lastQuestionDialog=false">取消</el-button>
				<el-button type="primary" @click="lastQuestionSure">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 显示成绩 -->
		<el-dialog title="提示" :visible.sync="examScoreDialog" width="30%" :before-close="examScoreSure">
			<span>{{examScore}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="examScoreSure">确 定</el-button>
			</span>
		</el-dialog>
	</header-footer>
</template>

<script>
	import headerFooter from '../../../components/cont_education/header_and_footer.vue'
	export default {
		name: 'exam',
		data() {
			return {
				examScoreDialog: false,
				lastQuestionDialog: false, //剩余题数弹框
				examScore: "",
				lastQuestion: "",
				itemPools: [],
				questionList: {}, //当前题
				prevText: '上一题',
				nextText: '下一题',
				rid: "",
				continualTime: "00:00:00",
				questHeight: "500px"
			}
		},
		mounted: function() {
			this.getQuestion(this.$route.params.examId,this.$route.params.productId);
		},
		methods: {
			getQuestion: function(examId,productId) {
				var that = this;
				this.common.post(this.api.getExam, {
					examId: examId,
					productId:productId
				}, function(res) {
					that.questHeight = that.$refs.questionBoxHeight.offsetHeight - 222 + "px";
					// console.log(res.resultMap);
					if (res.resultMap.continualTime) {
						that.dateFormat(Math.abs(res.resultMap.continualTime));
					} else {
						that.$message.warning('当前考试已结束');
						// common.toPage("/play/task");
					}
					that.itemPools = res.resultMap.itemPools;
					that.rid = res.resultMap.record.id;
					that.renderBefore();
				});
			},
			dateFormat: function(total) {
				var that = this;
				setInterval(function() {
					total--;
					if (total <= 0) {
						that.examSubmit();
					}
					var hour = Math.floor(total / 60 / 60);
					var minutes = Math.floor(total / 60 % 60);
					var seconds = Math.floor(total % 60);
					hour = hour < 10 ? '0' + hour : hour;
					minutes = minutes < 10 ? '0' + minutes : minutes;
					seconds = seconds < 10 ? '0' + seconds : seconds;
					that.continualTime = hour + ":" + minutes + ":" + seconds;
				}, 1000);
			},
			renderBefore: function() {
				var that = this;
				this.itemPools.forEach(function(item, index) {
					item.result = item.result == undefined ? "" : item.result;
					item.isFinish = item.result.length > 0;
					if (that.answerequal(item.result, item.rightAnswer)) {
						// item.isRight = true;
						item.isError = false;
					} else if (item.result == '') {
						// item.isRight = false;
						item.isError = false;
					} else {
						// item.isRight = false;
						item.isError = true;
					}
				});
				// var model=JSON.parse(this.desc);
				this.refresh(this.itemPools[0]);
			},
			refresh: function(model) {
				model.result = model.result == undefined ? "" : model.result;
				model.isFinish = model.result.length > 0;
				// this.anylise(model);
				this.render(model);
			},
			render: function(model) {
				var that = this;
				model.option.forEach(function(v, i) {
					var o = v;
					for (var j in o) {
						var optionKey = o[j];
						o.image = optionKey;
						if (!model.isFinish) o.image = that.containValue(model.result, optionKey) ? "right" : optionKey;
						else if (that.containValue(model.result, optionKey) && that.containValue(model.rightAnswer, optionKey)) {
							o.image = "right";
						} else if (that.containValue(model.result, optionKey) && !that.containValue(model.rightAnswer, optionKey)) {
							o.image = "error";
						} else if (!that.containValue(model.result, optionKey) && that.containValue(model.rightAnswer, optionKey)) {
							o.image = optionKey + "R";
						}
					}
				});
				this.questionList = model;
				if (model.isFinish == 0 && model.result.length > 0) {
					this.nextText = "确定";
				} else {
					this.nextText = "下一题";
				}
				// console.log(JSON.stringify(model))
			},
			optionClick: function(optionKey) {
				// console.log(optionKey)
				var model = this.questionList;
				this.resultChange(model, optionKey);
				this.render(model);
			},
			resultChange: function(model, optionKey) {
				if (model.result.indexOf(optionKey) >= 0) {
					model.result = model.result.replace(optionKey, "");
				} else if (model.type == 2) {
					model.result += optionKey;
				} else {
					model.result = optionKey;
				}
			},
			containValue: function(str1, str2) {
				if (str1 == undefined) return false;
				return str1.indexOf(str2) >= 0;
			},
			answerequal: function(answer1, answer2) {
				var that = this;
				var bl = true;
				if (answer1 == undefined || answer2 == undefined) return false;
				if (answer1.length != answer2.length) return false;
				answer1 = answer1.toUpperCase();
				answer2 = answer2.toUpperCase();
				answer1.split("").forEach(function(v, i) {
					if (!that.containValue(answer2, v)) {
						bl = false;
						return false;
					}
				});
				return bl;
			},
			next: function() {
				var that = this;
				var model = this.questionList;
				var index = this.questionList.sort;
				if (model.sort == this.itemPools[this.itemPools.length - 1].sort) {
					this.$message.warning('当前为最后一题！');
					return;
				}
				if (this.nextText == "确定") {
					model.isFinish = 1;
					this.common.post(this.api.saveItem, {
						rid: that.rid,
						itemid: model.id,
						answer: model.result
					}, function(res) {
						// console.log(JSON.stringify(res));
						that.nextText = "下一题";
						that.compareRightError(model);
						if (that.answerequal(model.rightAnswer, model.result)) {
							// model.isRight = true;
							model.isError = false;
							that.refresh(this.itemPools[index]);
						} else {
							// model.isRight = false;
							model.isError = true;
							that.refresh(this.itemPools[index + 2]);
						}
					});
					return;
				}
				this.refresh(this.itemPools[index]);
			},
			compareRightError: function(model) {
				var that = this;
				// console.log(JSON.stringify(model))
				model.option.forEach(function(v, i) {
					var o = v;
					for (var j in o) {
						var optionKey = o[j];
						o.image = optionKey;
						if (!model.isFinish) o.image = that.containValue(model.result, optionKey) ? "right" : optionKey;
						else if (that.containValue(model.result, optionKey) && that.containValue(model.rightAnswer, optionKey)) {
							o.image = "right";
						} else if (that.containValue(model.result, optionKey) && !that.containValue(model.rightAnswer, optionKey)) {
							o.image = "right";
						} else if (!that.containValue(model.result, optionKey) && that.containValue(model.rightAnswer, optionKey)) {
							o.image = optionKey + "R";
						}
					}
				});
			},
			questionSubmit: function() {
				var that = this;
				var totalQ = this.itemPools.length;
				var yiQ = 0;
				this.itemPools.forEach(function(v, i) {
					if (v.result) {
						yiQ += 1;
					}
				});
				var lastTi = totalQ - yiQ;
				if (totalQ != yiQ) {
					this.lastQuestion = "当前还有" + lastTi + "题未做，确认提交？"
					this.lastQuestionDialog = true;
				}
			},
			lastQuestionSure: function() {
				this.examSubmit();
				this.lastQuestionDialog = false;
			},
			examSubmit: function() {
				var that = this;
				this.common.post(this.api.submit, {
					rid: that.rid
				}, function(res) {
					// console.log(JSON.stringify(res))
					that.$message.success('试题已提交！');
					that.examScore = res.resultMap.remark;
					setTimeout(function() {
						that.examScoreDialog = true;
					}, 2000);
				});
			},
			examScoreSure: function() {
				this.examScoreDialog = false;
				this.common.toPage("/cont_education/play/task/0/0");
			},
			prev: function() {
				var index = this.questionList.sort - 2;
				if (index == -1) {
					this.$message.warning('当前为第一题！');
					// this.$message('当前为第一题！');
					return;
				}
				this.refresh(this.itemPools[index]);
			},
			toQuestion: function(index) {
				this.refresh(this.itemPools[index])
			}
		},
		components: {
			headerFooter
		}
	}
</script>

<style>
</style>
